<template>
  <div id="novel">
    <div class="input-control search-box search-box-circle has-icon-left has-icon-right">
      <input
        type="search"
        class="form-control search-input"
        placeholder="搜索"
        v-model="keywords"
      >
      <label
        class="input-control-icon-left search-icon"
        @click="search"
      ><i class="icon icon-search"></i></label>
      <a
        href="#"
        class="input-control-icon-right search-clear-btn"
        @click="remove"
      ><i class="icon icon-remove"></i></a>
    </div>
    <ul>
      <li
        v-for="(item,index) in searchnovel(keywords)"
        :key="index"
        class="novelLi"
      >
        {{item.title}}
        <span class="detail">
          <router-link :to="{name:'detail',query:{id:item.id}}">
            详情
          </router-link>
        </span>
      </li>
    </ul>
    <p class="novelCount">总数：{{novelCount}}本</p>
    <div class="returnDoki">
      <button
        class="btn btn-info"
        @click="$router.back()"
      >返回</button>
    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      keywords: '',
      novelList: [
        {
          id: 1,
          title: '道岳独尊'
        },
        {
          id: 2,
          title: '狂孽狂兵'
        },
        {
          id: 3,
          title: '近身狂兵'
        },
        {
          id: 4,
          title: '狂孽狂兵'
        },
        {
          id: 5,
          title: '至强狂兵'
        },
        {
          id: 6,
          title: '无敌天帝'
        },
        {
          id: 7,
          title: '独步天下'
        },
        {
          id: 8,
          title: '女人乖乖让我疼'
        },
        {
          id: 9,
          title: '冷血总裁DE心尖妻'
        }
      ]
    }
  },
  methods: {
    remove () {
      this.keywords = ''
    },
    search () {

    },
    searchnovel (keywords) {
      return this.novelList.filter(item => {
        if (item.title.includes(keywords)) {
          return item
        }
      })
    }
  },
  computed: {
    novelCount () {
      return this.searchnovel(this.keywords).length
    }
  }
}
</script>

<style scoped>
ul {
  padding-left: 0px;
  background: white;
}
.novelLi {
  padding: 4px;
  border-bottom: 1px solid rgb(207, 205, 205);
}
.detail {
  float: right;
  margin-right: 10px;
  color: rgb(245, 84, 84);
}
.returnDoki {
  margin-top: -10px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: white;
  text-align: center;
}
/* 搜索小说总数 */
.novelCount{
  margin-top: -10px;
  background: white;
  text-align: center;
}
</style>
